<template>
    <div class="box">
        <FormCom :config="config" @submitForm="submit" :data="formData"></FormCom>
    </div>
</template>

<script>
// 带验证的表单
import FormCom from "../components/formContainer/index";
export default {
    name: "autoForm",
    components: { FormCom },
    data() {
        return {
            formData: {
                name: "张三",
                xiaoqu: "我家",
                type: "1",
                upload: [{name: "xxx", url: "xxx"}]
            },
            config: {
                okTxt: "新建",
                layout: "vertical",
                item: [
                    {
                        key: "name",
                        type: "input",
                        label: "姓名",
                        style: { width: "50%" },
                        require: true,
                    },
                    {
                        key: "xiaoqu",
                        type: "input",
                        label: "小区名",
                        style: { width: "50%" },
                        require: true,
                    },
                    {
                        key: "type",
                        type: "select",
                        label: "类型",
                        style: { width: "50%" },
                        options: [
                            { value: "1", label: "aaa" },
                            { value: "2", label: "bbb" },
                        ],
                        clearable: true,
                        require: true,
                    },
                    {
                        key: "cascader",
                        type: "cascader",
                        label: "选择部门",
                        style: { width: "50%" },
                        api: "/api/tree",
                        apiLabel: "tree",
                        require: true,
                    },
                    {
                        key: "penson",
                        type: "select",
                        label: "联系人",
                        api: "/api/data",
                        apiLabel: "lifeList"
                    },
                    {
                        key: "radio",
                        type: "radio",
                        label: "单选框",
                        api: "/api/data",
                        apiLabel: "lifeList"
                    },
                    {
                        key: "checkbox",
                        type: "checkbox",
                        label: "多选框",
                        api: "/api/data",
                        apiLabel: "lifeList"
                    },
                    {
                        key: "upload",
                        type: "upload",
                        label: "附件",
                        require: true,
                        fileApi: "/api/file",
                        multiple: true,
                        tip: "只能上传xxx文件"
                    },
                ]
            }
        }
    },
    methods: {
        submit(val) {
            console.log(val)
        }
    },
};
</script>

<style></style>

